<template>
  <div class="app-container">
    <el-row>
      <el-form
        :model="actFlashSale"
        :rules="rules"
        ref="actFlashSale"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-divider content-position="left"
          ><legend class="divider-line">修改每日秒杀</legend></el-divider
        >
        <el-col :span="20">
          <el-form-item label="活动名称" prop="actFlashSaleName">
            <el-input v-model="actFlashSale.actFlashSaleName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="活动日期" prop="actDate">
            <el-date-picker
              v-model="actFlashSale.actDate"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="应用渠道" prop="channel">
            <el-radio-group v-model="actFlashSale.channel">
              <el-radio
                v-for="item in channels"
                :key="item.value"
                :label="item.value"
                >{{ item.name }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="申请规则" prop="auditRule">
            <el-input
              type="textarea"
              :rows="3"
              v-model="actFlashSale.auditRule"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="活动描述" prop="remark">
            <el-input
              type="textarea"
              :rows="3"
              v-model="actFlashSale.remark"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-divider content-position="left"
          ><legend class="divider-line">秒杀区间</legend></el-divider
        >

        <el-col :span="8">
          <el-form-item>
            <el-button
              type="warning"
              @click="addDomain"
              icon="el-icon-circle-plus-outline"
              >添加</el-button
            >
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="开始时间" prop="hourstart">
            <el-input-number
              v-model="actFlashSale.hourstart"
              :min="0"
              :max="24"
              :precision="0"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col
          class="add_norm"
          :span="16"
          v-for="(item, index) in actFlashSale.domains"
          :key="item.key"
        >
          <el-form-item label="秒杀区间" required>
            <el-input-number
              v-model="item.hour"
              :min="0"
              :max="24"
              :precision="0"
            ></el-input-number>
          </el-form-item>
          <el-button
            @click.prevent="removeDomain(item)"
            icon="el-icon-delete"
            style="margin-left: 40px;"
            circle
          ></el-button>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结束时间" prop="hourend">
            <el-input-number
              v-model="actFlashSale.hourend"
              :min="0"
              :max="24"
              :precision="0"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="20" style="margin-bottom: 60px;">
          <el-form-item>
            <span class="form-word-hint"
              >整点秒杀阶段，必须是0到24点整数，阶段时间从小到大填写，至少有开始和结束的时间点，是必须填写的，可以在开始和结束的时间段内添加不同的阶段，
              下一个阶段的开始时间是上一个阶段的结束时间。</span
            >
          </el-form-item>
        </el-col>

        <el-row :gutter="24">
          <div class="fixed-bottom-20">
            <el-button type="primary" @click="submitForm('actFlashSale')"
              >立即提交</el-button
            >
            <el-button type="success" @click="back">返回</el-button>
            <el-button @click="resetForm()">重置</el-button>
          </div>
        </el-row>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import { editActFlashSale, updateActFlashSale } from "@/api/promotion.js";
import { Message } from "element-ui";
import { getCodeManager, codeToArray } from "@/api/all";
export default {
  name: "flashsaleadd",
  data() {
    return {
      channels: [],
      actFlashSale: {
        id: "",
        actFlashSaleName: "",
        actDate: "",
        channel: "1",
        remark: "",
        auditRule: "",
        hourstart: "",
        hourend: "",
        hourAll: "",
        domains: []
      },
      rules: {
        actFlashSaleName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 2, max: 50, message: "长度在 2 到 50 个字符", trigger: "blur" }
        ],
        auditRule: [
          { required: true, message: "请输入申请规则", trigger: "blur" },
          { min: 2, max: 50, message: "长度在 2 到 50 个字符", trigger: "blur" }
        ],
        remark: [
          { required: true, message: "请输入活动描述", trigger: "blur" },
          { min: 2, max: 50, message: "长度在 2 到 50 个字符", trigger: "blur" }
        ],
        actDate: [
          { required: true, message: "请选择活动日期", trigger: "change" }
        ],
        channel: [{ required: true, message: "请选择渠道", trigger: "change" }],
        hourstart: [
          { required: true, message: "填写秒杀区间", trigger: "blur" }
        ],
        hourend: [{ required: true, message: "填写秒杀区间", trigger: "blur" }]
      }
    };
  },
  created() {
    let id = this.$route.query.id;
    this.editActFlashSaleInit(id);
    getCodeManager("CHANNEL", () => {
      this.channels = codeToArray("CHANNEL");
    });
  },
  methods: {
    editActFlashSaleInit(id) {
      editActFlashSale({ actFlashSaleId: id }).then(res => {
        this.actFlashSale.id = res.data.data.actFlashSale.id;
        this.actFlashSale.actFlashSaleName =
          res.data.data.actFlashSale.actFlashSaleName;
        this.actFlashSale.actDate = res.data.data.actFlashSale.actDate;
        this.actFlashSale.channel = "" + res.data.data.actFlashSale.channel;
        this.actFlashSale.auditRule = res.data.data.actFlashSale.auditRule;
        this.actFlashSale.remark = res.data.data.actFlashSale.remark;
        this.actFlashSale.hourstart = res.data.data.startTime;
        this.actFlashSale.hourend = res.data.data.endTime;
        this.actFlashSale.channel = "" + this.actFlashSale.channel;
        let hoursString = res.data.data.hourAll.split(",");
        for (var i in hoursString) {
          this.actFlashSale.domains.push({
            hour: hoursString[i],
            key: Date.now()
          });
        }
      });
    },
    addDomain() {
      this.actFlashSale.domains.push({
        hour: "",
        key: Date.now()
      });
    },
    removeDomain(item) {
      var index = this.actFlashSale.domains.indexOf(item);
      this.actFlashSale.domains.splice(index, 1);
    },
    submitForm(actFlashSale) {
      this.$refs[actFlashSale].validate(valid => {
        if (valid) {
          let hours = [];
          hours.push(this.actFlashSale.hourstart);
          for (let i in this.actFlashSale.domains) {
            let hour = this.actFlashSale.domains[i].hour;
            if (hour == undefined) {
              Message.error("请填写秒杀区间");
              return;
            }
            hours.push(hour);
          }
          hours.push(this.actFlashSale.hourend);
          for (let i = 0; i < hours.length - 1; i++) {
            if (hours[i] >= hours[i + 1]) {
              Message.error("秒杀区间后一个时间段要比前一个时间段大");
              return;
            }
          }
          this.actFlashSale.hourAll = hours.join(",");
          updateActFlashSale(this.actFlashSale).then(res => {
            if (!res.data.success) {
              Message.error(res.data.message);
              return;
            }
            Message.success("操作成功");
            history.back();
          });
        }
      });
    },
    resetForm() {
      this.actFlashSale.domains = [];
      let id = this.$route.query.id;
      this.editActFlashSaleInit(id);
    },
    back() {
      history.back();
    }
  }
};
</script>
<style scoped>
/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/deep/ .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
/deep/ [class*="el-col-"] {
  float: none;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.add_norm {
  display: flex;
}
.add_norm .el-form-item {
  width: 35%;
}
.add_norm .el-button {
  height: 36px;
  margin-left: 15px;
}

.el-divider {
  margin: 30px 0;
}
.divider-line {
  font-size: 20px;
  font-weight: 300;
}
</style>
